<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 名片维护系统</title>
    <link rel="stylesheet" th:href="@{/css/register.css}">
</head>
<body>
    <div class="register-page">
        <div class="register-container">
            <h2 class="register-title">用户注册</h2>
            <div class="register-message error" id="error-message" style="display: none;"></div>
            <div class="register-message success" id="success-message" style="display: none;"></div>
            
            <form id="register-form">
                <div class="register-form-group">
                    <label class="register-label" for="username">用户名</label>
                    <input class="register-input" type="text" id="username" name="username" required>
                </div>
                
                <div class="register-form-group">
                    <label class="register-label" for="email">邮箱</label>
                    <input class="register-input" type="email" id="email" name="email" required>
                </div>
                
                <div class="register-form-group">
                    <label class="register-label" for="password">密码</label>
                    <input class="register-input" type="password" id="password" name="password" required>
                </div>
                
                <div class="register-form-group">
                    <label class="register-label" for="confirm-password">确认密码</label>
                    <input class="register-input" type="password" id="confirm-password" name="confirmPassword" required>
                </div>
                
                <div class="register-form-group">
                    <label class="register-label" for="captcha">验证码</label>
                    <div class="register-captcha-container">
                        <input class="register-input register-captcha-input" type="text" id="captcha" name="captcha" required>
                        <img class="register-captcha-image" id="captcha-image" src="/user/captcha" alt="验证码" onclick="refreshCaptcha()">
                    </div>
                </div>
                
                <button class="register-button" type="submit">注 册</button>
            </form>
            
            <div class="register-links">
                <a class="register-link" href="/user/login">已有账号？点击登录</a>
            </div>
        </div>
    </div>
    
    <script>
        // 刷新验证码
        function refreshCaptcha() {
            document.getElementById('captcha-image').src = '/user/captcha?' + new Date().getTime();
        }
        
        // 表单提交
        document.getElementById('register-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirm-password').value;
            const captcha = document.getElementById('captcha').value;
            
            // 表单验证
            if (!username || !email || !password || !confirmPassword || !captcha) {
                showError('请填写完整信息');
                return;
            }
            
            if (password !== confirmPassword) {
                showError('两次密码输入不一致');
                return;
            }
            
            // 发送注册请求
            fetch('/user/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: username,
                    email: email,
                    password: password,
                    confirmPassword: confirmPassword,
                    captcha: captcha
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showSuccess(data.message);
                    // 清空表单
                    document.getElementById('register-form').reset();
                    // 3秒后跳转到登录页
                    setTimeout(function() {
                        window.location.href = '/user/login';
                    }, 3000);
                } else {
                    showError(data.message);
                    refreshCaptcha();
                }
            })
            .catch(error => {
                showError('服务器错误，请稍后再试');
                console.error('Error:', error);
            });
        });
        
        // 显示错误信息
        function showError(message) {
            const errorElement = document.getElementById('error-message');
            const successElement = document.getElementById('success-message');
            
            errorElement.textContent = message;
            errorElement.style.display = 'block';
            successElement.style.display = 'none';
        }
        
        // 显示成功信息
        function showSuccess(message) {
            const errorElement = document.getElementById('error-message');
            const successElement = document.getElementById('success-message');
            
            successElement.textContent = message;
            successElement.style.display = 'block';
            errorElement.style.display = 'none';
        }
    </script>
</body>
</html>